<script setup>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode";
import { activeRouter } from "@/utils/permission";
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const fixStyle = ref('');
const form = ref({ role: 1 });
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
};
const validCode = ref('');

onMounted(() => {
    sessionStorage.removeItem('user');
    const handleResize = () => {
        const windowWidth = document.body.clientWidth;
        const windowHeight = document.body.clientHeight;
        const windowAspectRatio = windowHeight / windowWidth;
        let videoWidth;
        let videoHeight;
        if (windowAspectRatio < 0.5625) {
            videoWidth = windowWidth;
            videoHeight = videoWidth * 0.5625;
            fixStyle.value = {
                height: windowWidth * 0.5625 + 'px',
                width: windowWidth + 'px',
               'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
               'margin-left': 'initial'
            };
        } else {
            videoHeight = windowHeight;
            videoWidth = videoHeight / 0.5625;
            fixStyle.value = {
                height: windowHeight + 'px',
                width: windowHeight / 0.5625 + 'px',
               'margin-left': (windowWidth - videoWidth) / 2 + 'px',
               'margin-bottom': 'initial'
            };
        }
    };
    window.onresize = handleResize;
    handleResize();
});

const createValidCode = (data) => {
    validCode.value = data;
};

const login = () => {
    // 模拟 $refs['form'].validate 的行为
    const validate = () => {
        const fields = Object.keys(rules);
        for (const field of fields) {
            const fieldRules = rules[field];
            for (const rule of fieldRules) {
                if (rule.required &&!form.value[field]) {
                    // 假设 $message 是通过 app.config.globalProperties.$message 挂载的全局方法
                    app.config.globalProperties.$message.error(rule.message);
                    return false;
                }
            }
        }
        return true;
    };
    if (validate()) {
        if (!form.value.validCode) {
            app.config.globalProperties.$message.error('请填写验证码');
            return;
        }
        if (form.value.validCode.toLowerCase()!== validCode.value.toLowerCase()) {
            app.config.globalProperties.$message.error('验证码错误');
            return;
        }
        request.post('/user/login', form.value).then((res) => {
            if (res.code === '0') {
                app.config.globalProperties.$message({
                    type:'success',
                    message: '登录成功'
                });
                sessionStorage.setItem('user', JSON.stringify(res.data));
                activeRouter();
                router.push('/');
            } else {
                app.config.globalProperties.$message({
                    type: 'error',
                    message: res.msg
                });
            }
        });
    }
};
</script>

<template>
  <div class="homepage-hero-module">
    <div class="video-container">
      <div :style="fixStyle" class="filter">
        <div style="width: 400px; margin: 100px auto">
          <div style="font-size: 30px; text-align: center; padding: 30px 0; color: #333">荣成市健康管理系统</div>
          <el-form ref="form" :model="form" size="normal" :rules="rules">
            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <div style="display: flex">
                <el-input prefix-icon="el-icon-key" v-model="form.validCode" style="width: 50%;" placeholder="请输入验证码"></el-input>
                <ValidCode @input="createValidCode" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
            </el-form-item>
            <el-form-item><el-button type="info" @click="$router.push('/register')">前往注册 >> </el-button></el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.homepage-hero-module{
  position: fixed;
  height: 100%;
  width: 100%;
  background: url("../assets/health_background.png") no-repeat center center;
  background-size: cover;
}
.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-container .poster img{
  z-index: 0;
  position: absolute;
}

.video-container .filter {
  z-index: 1;
  position: absolute;
  /*background: rgba(0, 0, 0, 0.4);*/
  width: 100%;
}

.fillWidth {
  width: 100%;
}
</style>
